<style>
    * {
        touch-action: pan-y;
    }

    body {
        font-family: 'Microsoft YaHei';
    }

    p {
        font-size: 4.5vw;
    }

    h5 {
        padding-top: 8px;
        padding-bottom: 8px;
        text-indent: 12px;
    }

    .mui-table-view.mui-grid-view .mui-table-view-cell .mui-media-body {
        font-size: 15px;
        margin-top: 8px;
        color: #333;
    }

    .mui-bar-nav~.mui-content {
        padding-top: 0;
    }

    .swiper {
        width: 100%;
        height: auto;
    }

    .swiper a img {
        width: 100%;
    }

    .swiper {
        --swiper-theme-color: #ff6600;
        --swiper-theme-color: #ff6600;
        /* 设置Swiper风格 */
    }

    .nomore {
        width: 100%;
        text-align: center;
        font-size: 1.5em;
        font-weight: bold;
        margin: 2em 0px;
    }
</style>

<body>
    <!-- 轮播图 -->
    <div class="swiper">
        <div class="swiper-wrapper">
            {foreach $toplist as $item}
            <div class="swiper-slide">
                <a href="#">
                    <img src="{$item.thumbs_text}">
                    <p class="mui-slider-title" style="opacity: .6;">{$item.title}</p>
                </a>
            </div>
            {/foreach}
        </div>
        <!-- 如果需要分页器 -->
        <div class="swiper-pagination"></div>
    </div>

    <!-- 搜索框 -->
    <form method="get" action="{:url('/home/subject/search')}">
        <div class="mui-input-row mui-search">
            <input type="search" name="keywords" class="mui-input-clear" placeholder="搜索" autocomplete />
        </div>
    </form>

    <!-- 课程列表 -->
    {foreach $catelist as $item}
    <div class="mui-content" style="background-color:#fff">
        <!-- 分类名称 -->
        <h5 style="background-color:#efeff4">
            {$item.name}
            <a href="{:url('/home/subject/search')}" style="float:right; color: black; margin-right:10px;">
                更多
            </a>
        </h5>

        <!-- 课程列表 -->
        <ul class="mui-table-view mui-grid-view">
            {foreach $item.subject as $subject}
            <li class="mui-table-view-cell mui-media mui-col-xs-6">
                <a href="{:url('/home/subject/subject', ['subid' => $subject['id']])}">
                    <img class="mui-media-object" src="{$subject.thumbs_text}">
                    <div class="mui-media-body">{$subject.title}</div>
                </a>
            </li>
            {/foreach}
        </ul>
    </div>
    {/foreach}

    <br />
    <br />
    <br />
    {include file="common/footer"}
</body>

<script src="/assets/home/js/swiper-bundle.min.js"></script>
<script>
    var mySwiper = new Swiper('.swiper', {
        direction: 'horizontal', // 垂直切换选项
        loop: true, // 循环模式选项
        autoplay: true,//可选选项，自动滑动
        // 如果需要分页器
        pagination: {
            el: '.swiper-pagination',
        },
        autoplay: {
            disableOnInteraction: false,
        },
        grabCursor : true,
    })
    new Swiper('.swiper')
    var mySwiper = document.querySelector('.swiper').swiper
    mySwiper.slideNext();
</script>